import { defineComponent, provide, reactive, renderSlot, watch } from 'vue'
import { IconConfig, IconConfigProvideKey } from './hooks/useIconConfig'
import symbols from './_symbols'

export default defineComponent({
  name: 'SpsSvgIconProvider',
  props: {
    size: {
      type: Number,
      default: 4
    }
  },
  setup(props, { slots }) {
    const iconConfig: IconConfig = reactive({
      size: props.size
    })
    watch(
      () => props.size,
      (val) => {
        iconConfig.size = val
      }
    )
    provide(IconConfigProvideKey, iconConfig)
    /* render 函数 */
    return () => {
      return (
        <>
          <svg width="0" height="0" v-html={symbols}></svg>
          {renderSlot(slots, 'default')}
        </>
      )
    }
  }
})
